<template>
  <div>
    <div class="app-container initializeRoll">
      <div class="topDiv" style="padding: 0 10px">
        <div>
          <p class="title">
            <!-- <img src="../../../assets/images/wtb4.png" alt /> -->
            <!-- <span>收入明细</span> -->
          </p>
          <el-form
            :model="queryParams"
            ref="queryForm"
            v-show="showSearch"
            label-width="68px"
          >
            <el-row>
              <el-col :span="6">
                <el-form-item label="提现时间">
                  <el-date-picker
                    v-model="dateRange"
                    value-format="yyyy-MM-dd"
                    type="daterange"
                    range-separator="-"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                  ></el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="6" :offset="1">
                <el-form-item label="提现类型">
                  <el-input v-model="queryParams.name"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item>
                  <el-button
                    type="primary"
                    icon="el-icon-search"
                    @click="handleQuery"
                    round
                    >搜索</el-button
                  >
                  <el-button icon="el-icon-refresh" @click="resetQuery" round
                    >重置</el-button
                  >
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <i class="brI"></i>

          <div class="containers center">
            <el-row style="margin-bottom: 0">
              <el-col
                :span="6"
                style="
                  border-right: 0.1px solid #eeeeee;
                  text-align: center;
                  transform: translateY(15px);
                "
              >
                <div
                  style="color: #F9800BF; margin-bottom: 5px; color: #f9800b"
                >
                  ￥<span
                    style="color: #f9800b; font-size: 30px; margin-bottom: 5px"
                    >{{ CardData.CommissionIncome }}0</span
                  >
                </div>
                <div>打款总金额(元)</div>
              </el-col>
              <el-col
                :span="6"
                style="
                  border-right: 0.1px solid #eeeeee;
                  text-align: center;
                  transform: translateY(15px);
                "
              >
                <div style="color: #3875F; margin-bottom: 5px; color: #3875f6">
                  ￥<span style="color: #3875f6; font-size: 30px"
                    >{{ CardData.ProfitIncome }}0</span
                  >
                </div>
                <div>成功金额(元)</div>
              </el-col>

              <el-col
                :span="6"
                style="
                  border-right: 0.1px solid #eeeeee;
                  text-align: center;
                  transform: translateY(15px);
                "
              >
                <div style="color: #3875F; margin-bottom: 5px; color: #3875f6">
                  ￥<span style="color: #3875f6; font-size: 30px"
                    >{{ CardData.ProfitIncome }}0</span
                  >
                </div>
                <div>失败金额(元)</div>
              </el-col>
            </el-row>
          </div>

          <i class="brI"></i>

          <div style="margin-top:40px">
            <el-tabs v-model="activeName" @tab-click="handleClick1">
              <el-tab-pane label="提现记录" name="0">
                <el-table
                  v-loading="loading"
                  :data="roleList"
                  @selection-change="handleSelectionChange"
                >
                  <!-- <el-table-column type="selection" width="55" align="center" /> -->
                  <el-table-column label="提现时间" prop="createTime" align="center"/>
                  <el-table-column label="提现账户" prop="delFlag" align="center"/>
                  <el-table-column
                    label="提现渠道"
                    prop="roleName"
                    align="center"
                    :show-overflow-tooltip="true"
                  />
                  <el-table-column
                    label="提现金额/元"
                    prop="roleKey"
                    align="center"
                    :show-overflow-tooltip="true"
                  />
                  <el-table-column label="收款户名" prop="roleSort" align="center"/>
                  <el-table-column label="收款账户" prop="roleSort" align="center"/>
                  <el-table-column label="身份证号" prop="roleSort" align="center"/>
                  <el-table-column label="预留手机号" prop="roleSort" align="center"/>
                  <el-table-column label="提现状态" align="center">
                    <template slot-scope="scope">
                      <el-switch
                        v-model="scope.row.status"
                        active-value="0"
                        inactive-value="1"
                        @change="handleStatusChange(scope.row)"
                      ></el-switch>
                    </template>
                  </el-table-column>
                  <el-table-column label="提现信息" prop="roleSort" align="center"/>
                  <el-table-column label="手续费" prop="roleSort" align="center"/>
                  <el-table-column label="实际到账金额" prop="roleSort" align="center"/>
                </el-table>
              </el-tab-pane>
            </el-tabs>
          </div>
          <pagination
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
          />

          <!-- 分页器 -->
          <!-- <el-row class="fye" style="margin-top: 10px">
            <el-col :span="23">
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="pageNum"
                :page-sizes="pageSize"
                :page-size="pageSizes"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
                prev-text="上一页"
                next-text="下一页"
                align="right"
              >
              </el-pagination>
            </el-col>
          </el-row> -->
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import Test from "@/components/Test";

// import { getUserId } from "@/api/liu/login.js";
import { listRole } from "@/api/system/role";
export default {
  data() {
    return {
      // 分页器
      pageNum: 1,
      pageSize: [10, 20, 50, 100],
      pageSizes: 10,
      total: 0,

      // ..提现窗口3个数据
      ruleForm: {
        money: "",
        region: "",
        date2: "",
        monetUser: "",
      },
      // ..卡片总数据
      CardData: {
        TotalRevenue: "", //总收入
        CommissionIncome: "", //佣金收入
        ProfitIncome: "", //利润收入
        AccountBalance: "", //账户余额
      },
      rules: {
        money: [{ required: true, message: "请输入提现金额", trigger: "blur" }],
        region: [
          { required: true, message: "请选择提现类型", trigger: "change" },
        ],
        monetUser: [
          { required: true, message: "请选择提现账号", trigger: "blur" },
        ],
      },
      // ..提现账号下拉框数据
      monetUser: [],
      // 用户ID
      userId: 0,

      // 时间
      dateRange: "",
      // tab切换
      // activeName: "first",
      // 遮罩层
      loading: true,
      // 显示搜索条件
      showSearch: true,
      // 分页总条数
      total: 0,
      // 收入表格数据
      noticeList: [],
      // 状态数据字典
      typeOptions: [
        {
          dictLabel: "分润",
          dictValue: 0,
        },
        {
          dictLabel: "佣金",
          dictValue: 1,
        },
      ],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        // 收入类型
        amountType: "1",
        // 时间
        // dateRange: "",
      },
      roleList: [
        {
          admin: true,
          createBy: null,
          createTime: "2021-08-17 06:25:53",
          dataScope: "22",
          delFlag: "asdasd",
          deptCheckStrictly: true,
          deptIds: null,
          flag: false,
          menuCheckStrictly: true,
          menuIds: null,
          remark: "超级管理员",
          roleId: 1,
          roleKey: "20",
          roleName: "银联",
          roleSort: "11",
          searchValue: null,
          status: "100",
        },
        {
          admin: true,
          createBy: null,
          createTime: "2021-03-15 06:25:53",
          dataScope: "52",
          delFlag: "qweqwe",
          deptCheckStrictly: true,
          deptIds: null,
          flag: false,
          menuCheckStrictly: true,
          menuIds: null,
          remark: "常国庆",
          roleId: 1,
          roleKey: "50",
          roleName: "支付宝",
          roleSort: "17",
          searchValue: null,
          status: "200",
        },
      ],
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    /** 查询角色列表 */
    getList() {
      this.loading = true;
      listRole(this.addDateRange(this.queryParams, this.dateRange)).then(
        (response) => {
          console.log(response, "获取的数据");
          // this.roleList = response.rows;
          this.total = response.total;
          this.loading = false;
        }
      );
    },
    // ..获取卡片总数数据
    totalParam() {
      selectCapUserWalletRecordListNum({ userId: this.userId }).then((res) => {
        // console.log(res,'卡片总数数据')
        if (res.code == 200) {
          this.CardData.TotalRevenue = res.data.zongjiesuan;
          this.CardData.CommissionIncome = res.data.yongjinjiesuan;
          this.CardData.ProfitIncome = res.data.fenchengjiesuan;
          this.CardData.AccountBalance = res.data.yue;
        } else {
          this.$message.error("获取数据失败!");
        }
      });
    },
    // ..获取账户余额
    userBalance() {
      // selectCapUserWalletById().then(res=>{
      //   console.log(res,'2222222')
      // })
    },
    // ..佣金收入
    Commission() {
      const data = {
        capUserWalletRecord: {
          createTime: "" || this.dateRange[0],
          updateTime: "" || this.dateRange[1],
          amountType: "1",
        },
        pageNum: this.pageNum,
        pageSize: this.pageSizes,
      };
      // 获取佣金收入列表
      selectCapUserWalletRecordListFy(data).then((res) => {
        console.log(res, "佣金收入列表");
        this.noticeList = res.data.list;
      });
    },
    // ..分页器
    handleCurrentChange(value) {
      console.log(value, "1");
    },
    handleSizeChange(value) {
      console.log(value, "2");
      this.pageSizes = value;
      console.log(this.pageSizes, "2");
    },
    // ..选择提现类型
    moneyType() {
      // console.log(this.ruleForm.region, "5555555");
      // 1代表支付宝
      if (this.ruleForm.region == "1") {
        gutUserWithdrawalAccountSelectAlipay(this.ruleForm.region).then(
          (res) => {
            this.monetUser = res;
            this.ruleForm.monetUser = this.monetUser[0].id;
          }
        );
      } else {
        selectByPageNumSizeTxList({
          pageNum: 1,
          pageSize: 6,
        }).then((res) => {
          this.monetUser = res.data.list;
          //  console.log( this.monetUser, "3333");
          this.ruleForm.monetUser = this.monetUser[0].id;
        });
        // gutUserWithdrawalAccountSelectBank("1").then((res) => {
        //   console.log(res,'3333')
        //   this.monetUser = res;
        //   console.log(this.monetUser[0].id);
        //   this.ruleForm.monetUser = this.monetUser[0].id;
        // });
      }
    },

    resetForm(formName) {
      this.$refs[formName].resetFields();
    },

    postSelectCapWithdrawalRecordListFun() {
      let objData = { ...this.queryParams };
      objData.userId = this.userId;
      // postSelectCapWithdrawalRecordList(objData).then((data) => {
      //   this.noticeList = data;
      //   this.loading = false;
      // });
    },

    handleClick(tab, event) {
      // console.log(tab, event, "4444");
      // console.log(tab.index, "4444");
      // console.log(this.userId, "33333333333");
      // ..查询提现记录
      // getSelectCapWithdrawalRecordById(this.userId).then((res) => {
      //   console.log(res, "结果");
      // });
      // ..提现记录列表
      if (tab.index == "3") {
        getselectByPageNumSize({
          pageNum: this.pageNum,
          pageSize: this.pageSizes,
        }).then((res) => {
          res.data.list.map((item) => {
            item.withdrawalType = "余额提现";
          });
          this.noticeList = res.data.list;
          // console.log(res.data.list, "结果");
        });
      } else if (tab.index == "1") {
        //点击分润收入
        const data = {
          capUserWalletRecord: {
            amountType: "0",
          },
          pageNum: this.pageNum,
          pageSize: this.pageSizes,
        };
        // 获取分润收入列表
        selectCapUserWalletRecordListFy(data).then((res) => {
          console.log(res, "分润收入");
          this.noticeList = res.data.list;
        });
      } else if (tab.index == "0") {
        //点击佣金收入
        this.Commission();
      }

      this.postSelectCapWithdrawalRecordListFun();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      console.log(this.dateRange, "日期");
      // 卡片数据
      const data = {
        createTime: this.dateRange[0],
        updateTime: this.dateRange[1],
        userId: this.userId,
      };
      selectCapUserWalletRecordListNum(data).then((res) => {
        console.log(res, "搜索卡片总数数据");
        if (res.code == 200) {
          this.CardData.TotalRevenue = res.data.zongjiesuan;
          this.CardData.CommissionIncome = res.data.yongjinjiesuan;
          this.CardData.ProfitIncome = res.data.fenchengjiesuan;
          this.CardData.AccountBalance = res.data.yue;
        } else {
          this.$message.error("获取数据失败!");
        }
      });

      this.Commission();
      this.postSelectCapWithdrawalRecordListFun();
    },
  },
};
</script>
<style>
</style>
